<template>
  <header class=""  :updateStatusData="updateStatusData"   style="position:relative" >

    <div id="iframe" class="iframeTitle" @mousedown="drag" :userShow="userShowD"  v-show="dialogVisible">
      蓝湾在线客服
      <a id="close" class="close  el-icon-close"  @click="close()" >

      </a>
      <iframe   frameborder="no" :src="src">

      </iframe>
    </div>


    <div class="header" :class="check" style="">
      <!--<div class="logo">-->
        <!--&lt;!&ndash;<div class="box">&ndash;&gt;-->
          <!--&lt;!&ndash;<div class="imgBoxs">&ndash;&gt;-->
            <!--&lt;!&ndash;<img :src="loginImg"/>&ndash;&gt;-->
          <!--&lt;!&ndash;</div>&ndash;&gt;-->
        <!--&lt;!&ndash;</div>&ndash;&gt;-->
      <!--</div>-->
      <el-popover
      ref="popover5"
      placement="top"
      width="100"
      trigger="hover"
      v-model="visible2">
      <div style="text-align:center; margin: 0;padding: 10px 0px">
        <p class="add" @click="goPage('update')" :us="us"> 我的账号</p>
        <p class="add" @click="goPage('oderList')"> 我的订单</p>
        <p class="add" @click="loginOut()"> 退出登录</p>
      </div>
      </el-popover>
      <el-popover
        ref="popover"
        placement="top"
        width="258"
        trigger="hover"
        v-model="visible">
        <div style="text-align:center; ">
          <img src="../../../static/img/wixin.jpg" height="258" width="258"/>
        </div>
      </el-popover>
      <el-popover
        ref="popover1"
        placement="left"
        width="258"
        trigger="click"
        v-model="visible1">
        <div style="text-align:center; ">
          <img src="../../../static/img/wixin.jpg" height="258" width="258"/>
        </div>
      </el-popover>
      <div class="box "  >
        <div class="nave w "  >
          <p class="" >
            <span class="upPage right " v-popover:popover>微信</span>
            <span class="us right" :class="{'check':check=='work'}" style="margin-left: .25rem;">客服电话：0755-8670-0307</span>
            <span class="wx right hover" :class="{'check':check=='company'}" style="" @click="fixNaveFn(3)">在线客服 </span>
            <span class="myOder right hover" v-popover:popover5 :class="{'check':check=='company'}" style="" v-show=" user.type == 1 && user.admin!=1">我的 </span>
            <span class="registerr right hover" :class="{'check':check=='company'}"  @click="goPage('register')" style="" v-show="check=='login' || user.type != 1 || user.admin ==1">注册</span>
            <span class="login right hover" :class="{'check':check=='login'}" @click="goPage('login')" v-show="(check!='login'&& user.type != 1) || user.admin ==1" style="">登陆</span>
          </p>
        </div>

      </div>

    </div>
    <div class="w" style="position: relative">
      <div class="indexPage left" style="width: 160px;height:78px;position: absolute;top: -50px;left: 0px;z-index: 99999999;cursor: pointer;padding: 0px;"  @click="goPage('index')">
        <div class="imgBoxs" >
          <img src="../../../static/img/icon/logo180.png" />
        </div>
      </div>
    </div>
    <div class="fixNave">
      <div class="temi " :class="{'check':fixNave==1}" @click="fixNaveFn(1)">
        <img src="../../../static/img/top.png" style="margin-top: 5px"/></div>
      <div class="temi " v-popover:popover1 :class="{'check':fixNave==2}" @click="fixNaveFn(2)">
        <img src="../../../static/img/toking.png" style="margin-top: 5px" /></div>
      <div class="temi " :class="{'check':fixNave==3}" @click="fixNaveFn(3)">
        <img src="../../../static/img/icon_zxkf.png" style="height:50px;width: 50px; " /></div>
    </div>


  </header>
</template>
<style scoped>
  /*基础 中文样式*/
  #close{position: absolute;top: 38px;right:16px;cursor:pointer; z-index: 1001;width: 30px;height: 30px;background:#6ca9f5;color: #fff;line-height: 30px}
  #iframe{ position: fixed;bottom: 60px;right: 80px;width: 500px;height: 400px;z-index: 1000;background-color: #fff}
  .iframeTitle{height: 30px;text-align: center;background: linear-gradient(to top right,#4690c6, #29557d);color: #FFFFFF;line-height: 30px;cursor: pointer}
  iframe{width: 100%;height: 380px;background-color: #c0c4cc}
  .fixNave{position: fixed;bottom: 0px;right: 20px;z-index: 99999999}
  .fixNave .temi{width:50px;height: 50px;background-color:  #cccccc;overflow: hidden;margin-bottom:20px}
  .fixNave .temi img{width:40px;height: 40px}
  .fixNave .check{background-color: #0062a2}
  .map .logo{border-bottom: 1px solid #ccc;height: .99rem;max-height: 75px}
  .box{width: 100%;height: 50px}
   .imgBoxs{width:160px;height:78px; }
   .imgBoxs img{max-width: 100%;margin: auto;}
  .add{cursor: pointer; font-size: 16px;color: #0062a2;height: 30px}
  .add:hover{background-color: #0062a2; color: #fff;height: 30px}
  p{height: 50px}
  .nave{height: 50px;border-bottom: 0px none;}
  .header{background:linear-gradient(to top right,#4690c6, #29557d); height: 50px;overflow: hidden;}
  .nave p {text-align:left;font-size: 18px;font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;height: 50px}
  .nave .check{background: #4f6d8f;color:#fff;}
  .nave  .hover:hover{background: #4f6d8f;color:#fff;cursor: pointer}
  .nave  span {text-align: center;margin: 0px 0px;padding: 0px 22px; color:#fff;font-size: 16px;line-height: 50px; font-weight: 500;font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif}
  .nave .upPage{padding: 0px;cursor: pointer}
  .us  span{text-align: center; color:rgb(250, 250, 250);font-weight: 500;font-size: 16px;font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif}
  .us .icon-phone{border:2px solid #f1f1f1;border-radius: .4rem;padding:.07rem .04rem .07rem .03rem;height:40px;margin-right:.1rem;font-size: .2rem}
  .icon-phone img{width: .3rem;position: relative;top: .09rem;left: .02rem}
  .logo p{text-align: center; color:rgb(255, 208, 75);font-weight: bold;line-height: 1rem}
  .iocnImg{position: relative;width: .48rem;top: 10px;right: 10px}
  /**英文样式覆盖**/
  /*.English .EnglishLogoText{ font-size: 14px;text-indent: 10px}*/
  /*.English  .navBox{ width: auto; margin-left: 30px;}*/
  /*.English  .red{ left: 30px;width: 120px}*/
  /*.English .transport .red{ left: 30px;width: 98px}*/
  /*.English .histroy .red{ left: 158px;width: 80px}*/
  /*.English .create .red{ left: 267px;width: 212px}*/
  /*.English .chart   .red {left: 20px;display: block}*/
  /*.English .Histroy   .red {left: 140px;display: block}*/
  /*.English .creatOder   .red {left: 250px;width: 250px;display: block}*/
  .code {width: 1rem; height: 1rem;border: 1px solid #e1e1e1;}
  .code img {max-width:100%}

</style>
<script>
  import { mapState, mapActions } from 'vuex'
  import Public from '../../vuex/public.js'
  import loginImg from '../../../static/img/icon/logo180.png'
  // import android from '../../../static/img/android.jpg'

  export default {
    name: 'my-header',
    created () {
     // 查看本页面路由 绑定对应页面class
      this.check = this.$route.name;
      if(this.check== 'map'){
        this.$store.commit('naveTo', false)
      }
      var usr = sessionStorage.getItem('user');
      if(usr !='undefined' && usr) {
        usr = JSON.parse(usr);
        if(usr.type == 1){
          var parm ={
            body:{data:usr,status:-2}
          }
          this.$store.commit('updateUser', parm);
          this.getInfo({})
        }
      }
    },
    data () {
      return {
        visible:false,
        visible1:false,
        src:'',
        user:{},
        activeIndex: '1',
        activeIndex2: '1',
        loginImg:loginImg,
        visible2:false,
        dialogVisible:false,
        fixNave:'',
        form:{
          userName: null, // 账号
          password: null, // 密码
          clientType: 1 // 客户端类型
        },
      }
    },
    methods: {
      ...mapActions({
        lognOutPost: 'loginOutFn',
        getInfo:'getInfo'
      }),
      handleSelect(key, keyPath) {

      },
      userFn (res) {
        // 登陆不成功 直接跳出 给出提示
        this.user = res.data;
      },
      close(){
        this.$store.commit('commitUserShow', false)
        this.src = ''
      },
      goPage (name,a) {
        if(a){
          window.open(a)
        }
          this.$router.push({name: name})
      },
      //  语言切换
      languageCheng (parm) {
        this.show = !this.show
        if (parm) {
          Public.publicLo.sessionStorageSav('Language',parm)
          this.$store.commit('updateLanguage', parm)
        }
      },
      //
      goAdmin(){
          var test = window.location.href
          this.$router.push({ name: 'adminDavise' })
          //window.open('/adminDavise','_self')
      },
      // 退出
      loginOut (id) {
        var parm = ''
        this.lognOutPost(parm)
      },
      openSuccess (text) {
        this.$message({
          message: text,
          type: 'success'
        })
      },
      openError (text) {
        this.$message.error(text)
      },
      //
      fixNaveFn(a){
        this.fixNave=a
        if(a==1){
          Public.publicLo.scroll_To(0)
        }
        if(a == 3){
          this.$store.commit('commitUserShow', true)

          // var openUrl = "http://chat56.live800.com/live800/chatClient/chatbox.jsp?companyID=1001273&configID=171322&jid=3295042049";//弹出窗口的url
          // var iWidth=500; //弹出窗口的宽度;
          // var iHeight=500; //弹出窗口的高度;
          // var iTop = (window.screen.availHeight-30-iHeight)/2; //获得窗口的垂直位置;
          // var iLeft = (window.screen.availWidth-10-iWidth)/2; //获得窗口的水平位置;
          // window.open(openUrl,"","height="+iHeight+", width="+iWidth+", top="+iTop+", left="+iLeft,", toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no");
          //
        }
      },
      //弹框拖拽
      drag(e,index){

        var dDiv=e.path[0],
          disX=e.clientX - dDiv.offsetLeft,
          disY=e.clientY - dDiv.offsetTop;
       var _this = this;
        document.onmousemove=function(e){
          e.preventDefault();
          var L = e.clientX- disX;
          var T = e.clientY- disY;
          dDiv.style.left = L + 'px';
          dDiv.style.top = T + 'px';
        }

        document.onmouseup=function(){
          document.onmousemove=null;
          document.onmouseout=null;
        }
      }
      },
    computed: {
      languageData: function () {
        var parm = this.language;
        if (parm) {
            if (parm.check == 'Chinese') {
              parm = parm.Chinese;
            }
            if(parm.check == 'English') {
              parm = parm.English;
            }
        }
        return parm
      },
      updateStatusData: function () {
       var parm = this.updateStatus;
       if (parm == 'out') {
         // 没记住密码保存空 localStorage
         Public.publicLo.sessionStorageSav('token', '');
         Public.publicLo.sessionStorageSav('user', '');
         // 清空所有数据
         this.$store.commit('loginOut', null);
         this.$router.push({ name: 'login' });
         // this.lognOutPost(this.user)
       }
       if (parm == 'outErorr') {
         Public.publicLo.sessionStorageSav('token', '');
         Public.publicLo.sessionStorageSav('user', '');
         // 清空所有数据
         this.$store.commit('loginOut', null);
         this.$router.push({ name: 'login' })
       }
       return 1
     },
      us: function () {
        var parm = this.userData
        if(parm){
          this.userFn(parm)
        }
        return 1
      },
      userShowD:function () {
        var parm = this.userShow
        if(parm){
          this.src = 'http://chat56.live800.com/live800/chatClient/chatbox.jsp?companyID=1001273&configID=171322&jid=3295042049'
          setTimeout(function () {
            that.dialogVisible = parm
          },500)
        }else {
          this.src = ''
          this.dialogVisible = parm
        }
        var that = this

       return parm
      },
      ...mapState([
        'nav',
        'language',
        'updateStatus',
        'userData',
        'userShow'
      ])
    },
    mounted () {

    }
  }
</script>

